import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  // Modal,
  TouchableHighlight,
  TouchableOpacity,
} from 'react-native';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons'; 
import Icons from 'react-native-vector-icons/FontAwesome'; 
import Entypo from 'react-native-vector-icons/Entypo';
class FolderComponent extends React.Component{
  constructor(props) { 
    super(props);
    this.state = {
      show: false,
      shareShow: false
    }
  }
  _onPressListItem =() =>{
    this.setState((previousState)=>{
      return ({
        show: !previousState.show,
        text: 'Placeholder'
      })
    })
  }
  _onPressShareItem =()=>{
    this.setState((previousState)=>{
      return ({
        shareShow: !previousState.shareShow,
        text: 'Placeholder'
      })
    })
  }
  render() {
    let shareDialogView = this.state.shareShow ? 
      <View style={styles.dialog} >
        <View style={styles.dialogModal} >
          <TouchableOpacity style={{flex:1}} onPress={() => { this._onPressShareItem() }}>
          </TouchableOpacity>
        </View>
        <View style={styles.shareDialogWrap}>
          <View>
            <View style={styles.shareDialogTitle}>
              <Text>分享到</Text>
            </View>
            <View style={styles.shareDialogContent}>
              <View style={styles.shareOption}>
                <View style={styles.shareItem}>
                  <Icons name="wechat" color="#fff" size={24} style={{backgroundColor: '#32d46b',borderRadius: 21, width:42,height:42,marginBottom: 4,textAlign: 'center',justifyContent: 'center',alignItems: 'center',lineHeight: 42}}></Icons>
                  <Text>微信好友</Text>
                </View>
                <View style={styles.shareItem}>
                  <Entypo name="picasa" color="#fff" size={24} style={{backgroundColor: '#32d46b',borderRadius: 21, width:42,height:42,marginBottom: 4,textAlign: 'center',justifyContent: 'center',alignItems: 'center',lineHeight: 42}}></Entypo>
                  <Text>微信朋友圈</Text>
                </View>
                <View style={styles.shareItem}>
                  <Icons name="qq" color="#fff" size={24} style={{backgroundColor: '#e74046',borderRadius: 21, width:42,height:42,marginBottom: 4,textAlign: 'center',justifyContent: 'center',alignItems: 'center',lineHeight: 42}}></Icons>
                  <Text>QQ</Text>
                </View>
                <View style={styles.shareItem}>
                  <Icons name="tencent-weibo" color="#fff" size={24} style={{backgroundColor: '#fa7563',borderRadius: 21, width:42,height:42,marginBottom: 4,textAlign: 'center',justifyContent: 'center',alignItems: 'center',lineHeight: 42}}></Icons>
                  <Text>新浪微博</Text>
                </View>
              </View>
            </View>
          </View>
        </View>
      </View> : null
    let dialogView = this.state.show ?
      <View style={styles.dialog} >
        <View style={styles.dialogModal} >
          <TouchableOpacity style={{flex:1}} onPress={() => { this._onPressListItem() }}>
          </TouchableOpacity>
        </View>
        <View style={styles.dialogWrap}>
          <View>
            <View style={styles.dialogContent}>
              <View style={styles.inline}>
                  <Icons style={styles.operIcon} name="file-text-o" size={16}></Icons>
                  <Text style={styles.operText}>历史版本</Text>
              </View>
              <View style={styles.inline}>
                <Icons style={styles.operIcon} name="exclamation" size={18}></Icons>
                <Text style={styles.operText}>详细信息</Text>
              </View>
              <TouchableOpacity
                onPress={() => Actions.removeFolder()}>
                <View style={styles.inline} >
                  <Icons style={styles.operIcon} name="arrows-alt" size={17}></Icons>
                  <Text style={styles.operText}>移动</Text>
                </View>
              </TouchableOpacity>
              <TouchableOpacity onPress={()=> this.setState({shareShow: true})}>
                <View style={styles.inline}>
                  <Icons style={styles.operIcon} name="external-link" size={18}></Icons>
                  <Text style={styles.operText}>分享</Text>
                </View>
              </TouchableOpacity>
              <View style={styles.inline}>
                <Icons style={styles.operIcon} name="trash-o" size={18}></Icons>
                <Text style={styles.operText}>删除</Text>
              </View>
              <View style={styles.inline}>
                <Icons style={styles.operIcon} name="edit" size={18}></Icons>
                <Text style={styles.operText}>重命名</Text>
              </View>
            </View>
          </View>
        </View>
      </View>:null
    return (
      <View style={styles.container}>
        <FlatList
            data={[
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期一的文件夹',Size: 0,Type: 1},
              {Hash: 'QmSasQaPRJ829Wuadq9fTKdGyU5SYbaEYhr2tT89qZiYVT', Name: '星期二的文件夹',Size: 2122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1},
              {Hash: 'QmUNLLsPACCz1vLxQVkXqqLX5R1X345qqfHbsf67hvA3Nn', Name: '星期三的文件夹',Size: 122,Type: 1}
            ]}
            renderItem={({item,index}) => <View style={styles.folderLi}>
              <Icons style={{color: '#ffd02f'}} name='folder' size={22}/>
              <View style={styles.info}>
                <View>
                  <Text style={styles.name} numberOfLines={1} ellipsizeMode='tail'>{item.Name}</Text>
                  <Text style={styles.hash} numberOfLines={1} ellipsizeMode='tail'>hash:{item.Hash}</Text>
                  <Text style={styles.size}>大小：{item.Size}KB</Text>
                </View>
              </View>
              <TouchableOpacity
                onPress={() => {this._onPressListItem()}}>
              <Icon style={styles.handleIcon} name="ios-more" size={22}></Icon>
              </TouchableOpacity>
          </View>}
          />
          {dialogView}
          {shareDialogView}
      </View>
    ); 
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 15,
    paddingBottom: 15,
    backgroundColor: '#fff'
   },
  folderUl:{

  },
  folderLi:{
    borderBottomColor: '#eeeeee',
    borderBottomWidth: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: 15,
    paddingRight: 15,
    paddingTop: 10,
    paddingBottom : 10
  },
  folderIcon: {
    height: 30,
    width: 30,
    marginRight: 10,
  },
  info:{
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    marginLeft: 10,
    marginRight:10
  },
  name:{
    fontSize: 13,
    color: '#434343',
    fontWeight: 'bold',
  },
  hash:{
    fontSize: 12,
    color: '#858585'
  },
  size:{
    fontSize: 12,
    color: '#858585'
  },
  handleIcon:{
    width: 30,
    marginLeft: 10,
    color: '#999'
  },
  dialog:{
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 10
  },
  dialogModal:{
    height: '100%',
    backgroundColor: 'rgba(0,0,0,0.5)',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 20
  },
  dialogWrap:{
    width: '80%',
    backgroundColor: '#fff',
    position: 'absolute',
    left: '10%',
    top: '30%',
    borderRadius: 4,
    backfaceVisibility: "hidden",
    padding: 12,
    fontSize: 14,
    color: '#606266',
    zIndex:50
  },
  shareDialogWrap:{
    width: '100%',
    backgroundColor: '#fff',
    position: 'absolute',
    bottom: 76,
    zIndex:80,
    borderBottomWidth: 1,
    borderBottomColor: '#eeeeee'
  },
  inline:{
    paddingTop: 5,
    paddingBottom: 5,
    alignItems: 'center',
    flexDirection: 'row',
    fontSize: 20,
    color: '#444444',
    lineHeight: 2,
  },
  operIcon:{
    width: 30,
    marginRight: 10
  },
  operText:{
    flex: 1
  },
  shareDialogTitle:{
    color: '#222222',
    height: 42,
    justifyContent: 'center',
    textAlign: 'center',
    alignItems: 'center',
    borderBottomColor: '#f5f5f5',
    borderBottomWidth: 1
  },
  shareOption:{
    flexDirection: 'row',
    fontSize: 11,
    color: '#999999',
    textAlign: 'center',
    padding: 10
  },
  shareItem:{
    flex: 1,
    textAlign: 'center',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default FolderComponent;